<template>
	<view class="page">
		<view class="header">
			<view class="header-1"></view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<view class="bannerAll">
			<view class="banner"></view>
		</view>
		<view class="check">
			<view class="checkItem" v-for="(item,index) in checkList" :key="index" @click="iconsChange(index)"
				v-if="item.isShow">
				<image :src="item.imgUrl"></image>
				<view style="margin-top: 6px;">{{item.title}}</view>
			</view>
		</view>
		<view class="courseBox">
			<view class="courseTitle">
				<view class="text">课程列表</view>
			</view>
			<!-- 未报名的 -->
			<view>
				<!-- 培训考试中心 -->
				<view class="contentList" v-if="!isDzFlag">
					<template v-for="(item, index) in trainingLists">
						<view v-if="(item.detail.enabledMark == 10 || !item.detail.enabledMark)" class="item pr"
							@click="baoMing2(item)" :key="index">
							<template v-if="item.cover">
								<image :src="fileUrl + item.cover" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<template v-else>
								<image src="@/static/common/default.jpg" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<view class="flex1">
								<view class="title">{{ item.name }}</view>
								<view class="itemButton examSigns">报名</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 科普 -->
				<view class="contentList">
					<template v-for="(item, index) in scienceLists">
						<view v-if="(item.detail.enabledMark == 10 || !item.detail.enabledMark)" class="item pr"
							@click="baoMing(item)" :key="index">
							<template v-if="item.cover">
								<image :src="fileUrl + item.cover" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<template v-else>
								<image src="@/static/common/default.jpg" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<view class="flex1">
								<view class="title">{{ item.name }}</view>
								<view class="itemButton examSigns">报名</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 我的考试 -->
				<view class="contentList" v-if="!isDzFlag">
					<template v-for="(item, index) in myExamLists">
						<view v-if="(item.enabledMark == -1 || !item.enabledMark)" class="item pr" 
							@click="item.examStatus == '进行中' ? myExamWindow(item) : ''" :key="index">
							<template v-if="item.cover">
								<image :src="fileUrl + item.cover" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<template v-else>
								<image src="@/static/common/default.jpg" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<view class="flex1">
								<view class="title">{{ item.fullName }}</view>
								<view :class="['itemButton', 'examSigns', item.examStatus == '进行中' ? '' : 'disabled']">报名</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<!-- 已报名的 -->
			<view>
				<!-- 培训考试中心 -->
				<view class="contentList" v-if="!isDzFlag">
					<template v-for="(item, index) in trainingLists">
						<view v-if="(!(item.detail.enabledMark == 10 || !item.detail.enabledMark))" class="item pr" :key="index">
							<!-- @click="baoOkMing(item,1)" :key="index" -->
							<template v-if="item.cover">
								<image :src="fileUrl + item.cover" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<template v-else>
								<image src="@/static/common/default.jpg" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<view class="flex1">
								<view class="title">{{ item.name }}</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 科普 -->
				<view class="contentList">
					<template v-for="(item, index) in scienceLists">
						<view v-if="(!(item.detail.enabledMark == 10 || !item.detail.enabledMark))" class="item pr" :key="index">
							<!-- @click="baoOkMing(item,2)" :key="index" -->
							<template v-if="item.cover">
								<image :src="fileUrl + item.cover" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<template v-else>
								<image src="@/static/common/default.jpg" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<view class="flex1">
								<view class="title">{{ item.name }}</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 我的考试 -->
				<view class="contentList" v-if="!isDzFlag">
					<template v-for="(item, index) in myExamLists">
						<view v-if="(!(item.enabledMark == -1 || !item.enabledMark))" class="item pr" :key="index">
							<template v-if="item.cover">
								<image :src="fileUrl + item.cover" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<template v-else>
								<image src="@/static/common/default.jpg" mode="scaleToFill" class="widthFixs"></image>
							</template>
							<view class="flex1">
								<view class="title">{{ item.fullName }}</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<!-- 我的考试-提示弹窗 -->
			<u-modal :show="tipsShow" :title="tipsTitle" :showCancelButton="true" confirm-text="开始" class="uModals"
				@confirm="tipsConfirm" @cancel="tipsCancel">
				<view class="slot-content">
					<rich-text :nodes="tipsContent"></rich-text>
				</view>
			</u-modal>
			<!-- 科普-提示弹窗 -->
			<u-modal :show="mbShow" :title="mbTitle" :showCancelButton="true" confirm-text="确定报名" class="uModals"
				@confirm="mbConfirm(1)" @cancel="mbCancel(1)">
				<view>
					<view>亲爱的用户，请认真阅读以下温馨提示：</view>
					<view class="slot-content">
						<rich-text :nodes="mbContent"></rich-text>
					</view>
				</view>
			</u-modal>
			<!-- 培训中心-提示弹窗 -->
			<u-modal :show="mbShow2" :title="mbTitle" :showCancelButton="true" confirm-text="确定报名" class="uModals"
				@confirm="mbConfirm(2)" @cancel="mbCancel(2)">
				<view>
					<view>亲爱的培训考试用户，请认真阅读以下温馨提示：</view>
					<view class="slot-content">
						<rich-text :nodes="mbContent2"></rich-text>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		loadTemsCourseList,
		myExamList,
		getScopeList,
		getSubjectDetail,
		studySubject
	} from '@/api/index'
	import {
		getDictionaryDataList
	} from '@/api/dictionary'
	export default {
		data() {
			return {
				fileUrl: this.$globalSetting.fileImage,
				showBm: false,
				checkList: [{
					imgUrl: "/static/index/train.png",
					title: "我的培训",
					isShow: true
				}, {
					imgUrl: "/static/index/exam.png",
					title: "我的考试",
					isShow: true
				}, {
					imgUrl: "/static/index/course.png",
					title: "我的课程",
					isShow: true
				}, {
					imgUrl: "/static/index/cert.png",
					title: "我的证书",
					isShow: true
				}],
				content: null,
				temsCourseLists: [],
				myExamLists: [],
				trainingLists: [],
				scienceLists: [],
				certificateOptions: [],
				categoryId: null,
				categoryId2: null,
				isTriggered: false,
				isRefreshing: false, // 标记是否正在刷新
				loadingStatus: false,
				currentPage: 1,
				pageSize: 10,
				status: 'more',
				reload: false,
				chooseId: '',
				currentItem: {},
				currentExmainId: null,
				tipsShow: false,
				tipsTitle: '注意事项',
				tipsContent: `1、最终成绩取第一次过及格线的分数，复考不更新成绩。<br>2、考试中途退出需重新考。<br>确认知晓以上信息后,点击“开始”进入正式考试!`,
				mbShow: false,
				mbShow2: false,
				mbTitle: '注意事项',
				mbContent2: `1、专题内每个视频需自测并通过；<br>2、自测全通过才可参加专题技能/理论考试；<br>3、最终成绩取第一次过及格线的分数。`,
				mbContent: `科普专题报名后，需学习完其所有视频才可以领取证书哦~`,
				isTouristFlag: null,
				isDzFlag: null,
			}
		},
		onLoad() {

		},
		onShow() {
			// 大众权限判断
			this.isDzFlag = uni.getStorageSync('isDzFlag');
			if (this.isDzFlag) {
				this.checkList[0].isShow = false;
				this.checkList[1].isShow = false;
				this.$forceUpdate();
			} else {
				this.checkList[0].isShow = true;
				this.checkList[1].isShow = true;
				this.$forceUpdate();
			}

			// 加载课程数据
			this.getMyExamList();
			this.getDicList();
			// this.getCourseList();

			// #ifdef H5
			let isTouristFlag = uni.getStorageSync('isTourist');
			if (isTouristFlag) {
				this.setupTabBarClickMonitor()
				this.initTabBarStatus() // 初始化TabBar状态
			}
			this.isTouristFlag = isTouristFlag;
			// #endif
		},
		methods: {
			initTabBarStatus() {
				const tabItems = document.querySelectorAll('.uni-tabbar__item')
				if (tabItems.length > 3) {
					// 禁用第3个(index=2)和第4个(index=3)Tab
					tabItems[2].classList.add('disabled')
					tabItems[2].style.pointerEvents = 'none'
					tabItems[2].style.opacity = '0.5'

					tabItems[3].classList.add('disabled')
					tabItems[3].style.pointerEvents = 'none'
					tabItems[3].style.opacity = '0.5'
				}
			},
			setupTabBarClickMonitor() {
				document.addEventListener('click', (e) => {
					const tabBar = document.querySelector('.uni-tabbar')
					if (!tabBar) return

					if (tabBar.contains(e.target)) {
						const tabItem = e.target.closest('.uni-tabbar__item')
						if (!tabItem) return

						const index = Array.from(tabItem.parentNode.children).indexOf(tabItem)
						const isClickable = this.isTabItemClickable(tabItem)

						if (index === 2 || index === 3 || !isClickable) {
							// this.showSuccess('当前登录者是游客，暂无权限', 'none');
							uni.showModal({
								title: '当前登录者是游客，暂无权限',
								cancelText: '返回',
								confirmText: '退出',
								success: (res) => {
									if (res.confirm) {
										this.$store.dispatch('user/logout', {})
										uni.redirectTo({
											url:'/pages/register/login'
										})
									}
								}
							})
							e.preventDefault()
							e.stopPropagation()
							e.stopImmediatePropagation()

							// 添加点击反馈效果
							tabItem.style.transform = 'scale(0.95)'
							setTimeout(() => {
								tabItem.style.transform = ''
							}, 200)
						}
					}
				}, true)
			},
			isTabItemClickable(tabItem) {
				const style = window.getComputedStyle(tabItem)
				return (
					style.pointerEvents !== 'none' &&
					style.cursor !== 'not-allowed' &&
					!tabItem.classList.contains('disabled') &&
					parseFloat(style.opacity) > 0.1
				)
			},
			iconsChange(type) {
				if (this.isTouristFlag) {
					this.showSuccess('当前登录者是游客，暂无权限', 'none');
					return;
				}
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/cert/index'
					})
				} else {
					let obj = {
						type: type,
						flag: true
					}
					uni.setStorageSync('currentClick', obj);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/learnCenter/learnCenter'
						})
					}, 100)
				}
			},
			// 我的考试
			async getMyExamList() {
				let params = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					enabledMark: '',
					fullName: '',
					sidx: '',
					sort: 'desc',
					timeMark: 0,
					categoryId: 4
				}
				let response = await myExamList(params);
				this.myExamLists = response.data.list;
				this.myExamLists.forEach(item => {
					if ((item.startDatetime == '' && item.endDatetime == '') || (item.startDatetime == null && item.endDatetime == null)) {
					  item.examStatus = '进行中';
					}
					else {
					  item.examStatus = this.getEventStatus(item.startDatetime, item.endDatetime);
					}
				})
			},
			getEventStatus(startDatetime, endDatetime) {
				let startTime = new Date(startDatetime).getTime();
				let endTime = new Date(endDatetime).getTime();
				let currentTime = new Date().getTime();
				if (currentTime < startTime) {
					return '未开始';
				} else if (currentTime >= startTime && currentTime <= endTime) {
					return '进行中';
				} else {
					return '已结束';
				}
			},
			// 培训考试中心和科普
			getDicList() {
				getDictionaryDataList('559344237955514629', {
					keyword: '',
					isTree: 0
				}).then(res => {
					this.certificateOptions = res.data.list;
					for (let i in this.certificateOptions) {
						if (this.certificateOptions[i].enCode == 'Leader') {
							this.categoryId = this.certificateOptions[i].id;
						}
						if (this.certificateOptions[i].enCode == 'Common') {
							this.categoryId2 = this.certificateOptions[i].id;
						}
					}
					this.getList();
				})
			},
			getList() {
				// 培训考试中心
				getScopeList({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					categoryId: this.categoryId,
					enabledMark: 1,
				}).then((res) => {
					if (res.code === 200 && res.data.list.length > 0) {
						const detailPromises = res.data.list.map(item => {
							return getSubjectDetail(item.id).then(detailRes => {
								if (detailRes.code === 200) {
									item.detail = detailRes.data;
								}
								return item;
							});
						});
						Promise.all(detailPromises).then(completedItems => {
							this.trainingLists = completedItems;
						});
					} else {
						this.trainingLists = [];
					}
				});
				// 科普
				getScopeList({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					categoryId: this.categoryId2,
					enabledMark: 1,
				}).then((res) => {
					if (res.code === 200 && res.data.list.length > 0) {
						const detailPromises = res.data.list.map(item => {
							return getSubjectDetail(item.id).then(detailRes => {
								if (detailRes.code === 200) {
									item.detail = detailRes.data;
								}
								return item;
							});
						});
						Promise.all(detailPromises).then(completedItems => {
							this.scienceLists = completedItems;
						});
					} else {
						this.scienceLists = [];
					}
				});
			},
			baoMing(item) {
				if (this.isTouristFlag) {
					this.showSuccess('当前登录者是游客，暂无权限', 'none');
					return;
				}
				this.currentItem = item;
				this.mbShow = true;
			},
			baoMing2(item) {
				if (this.isTouristFlag) {
					this.showSuccess('当前登录者是游客，暂无权限', 'none');
					return;
				}
				this.currentItem = item;
				this.mbShow2 = true;
			},
			mbConfirm(type) {
				if (!this.currentItem.id) return;
				studySubject(this.currentItem.id).then(res => {
					if (res.code === 200) {
						this.showSuccess('报名成功', 'none');
						if (type == 1) {
							this.mbShow = false;
						}
						else {
							this.mbShow2 = false;
						}
						this.getList();
					}
				});
			},
			mbCancel(type) {
				if (type == 1) {
					this.mbShow = false;
				}
				else {
					this.mbShow2 = false;
				}
			},
			baoOkMing(item, type) {
				let url = '';
				if (type == 1) {
					url = `/pages/learnCenter/learnCenterList?id=${item.id}`;
				} else {
					url = `/pages/learnCenter/scienceList?id=${item.id}`;
				}
				uni.navigateTo({
					url: url
				})
			},
			myExamWindow(item) {
				if (this.isTouristFlag) {
					this.showSuccess('当前登录者是游客，暂无权限', 'none');
					return;
				}
				// // 不需要测试的时候放开
				// if (item.enabledMark == 1) {
				// 	return;
				// }
				this.tipsShow = true;
				this.currentExmainId = item.id;
			},
			tipsConfirm() {
				this.tipsShow = false;
				let id = this.currentExmainId;
				uni.navigateTo({
					url: '/pages/examinationInterface/examinationInterface?id=' + id
				})
			},
			tipsCancel() {
				this.tipsShow = false;
			},
			// getCourseList() {
			// 	let params = {
			// 		currentPage: this.currentPage,
			// 		pageSize: this.pageSize,
			// 		sort: 'desc',
			// 	}
			// 	loadTemsCourseList(params).then(res => {
			// 		this.temsCourseLists = this.temsCourseLists.concat(res.data.list);
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.title {
	  display: -webkit-box;
	  -webkit-line-clamp: 1;  /* 限制两行 */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.examSigns.disabled {
		color: #999 !important;
	}
	.courseBox {
		width: 100%;
		padding: 20rpx 30rpx 100rpx;
		box-sizing: border-box;
		flex: 1;
	}

	.itemButton {
		width: 136rpx;
		border-radius: 14px;
		border: 1px solid #2265EE;
		font-weight: 400;
		font-size: 14px;
		color: #2265EE;
		line-height: 20px;
		text-align: center;
		font-style: normal;
		float: right;
	}

	.courseItem {
		width: 100%;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #EBEDF0;
		display: flex;
	}

	.btnList {
		margin-top: 30rpx;
		gap: 30rpx;
	}

	.widthFixs {
		width: 40%;
		margin-right: 20rpx;
		border-radius: 16rpx;
	}

	.examSigns {
		position: absolute;
		right: 0;
		bottom: 24rpx;
	}
	
	.slot-content {
		padding: 24px 16px;
		background-color: #F7F8FA;
	}

	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.contentall {

			display: flex;
			flex-direction: column;

			.content1 {
				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
				font-weight: 400;
				font-size: 14px;
				color: #323233;
				line-height: 20px;
				text-align: left;
				font-style: normal;
			}

			.content2 {
				margin-top: 8px;
				width: 263px;
				height: 132px;
				background: #F7F8FA;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0px 16px 0 16px;

				.text {
					width: 100%;

					font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 400;
					font-size: 14px;
					color: #323233;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;

			.header-1 {
				flex: 1;
			}

			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.header-3 {
				flex: 1;
			}
		}

		.bannerAll {
			width: 100%;
			display: flex;
			text-align: center;
			justify-content: center;
			align-items: center;

			.banner {
				width: 686rpx;
				height: 228rpx;
				background: #FFFFFF;
				background-image: url('@/static/index/indexBanner.png');
				/* 替换为你的图片路径 */
				background-size: cover;
				/* 使背景图片覆盖整个元素区域 */
				background-position: center;
				/* 将背景图片居中显示 */
				background-repeat: no-repeat;
				/* 防止背景图片重复 */
			}

		}

		.check {
			width: 100%;
			display: flex;
			flex-direction: row;


			.checkItem {
				width: 250rpx;
				height: 208rpx;
				display: flex;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #323233;
				line-height: 40rpx;
				text-align: right;
				font-style: normal;
				align-items: center;
				flex-direction: column;
				background: #FFFFFF;

				image {
					width: 92rpx;
					height: 92rpx;
				}
			}
		}

		.courseTitle {
			width: 100%;
			display: flex;

			justify-content: center;


			.text {
				width: 100%;
				// width: 686rpx;
				// background: #FFFFFF;
				// background-size: cover;
				// background-position: center;
				// background-repeat: no-repeat;
			}

			display: flex;
			flex-direction: row;
			align-items: left;
			margin: 32rpx 0 0 0rpx;

			font-family: system-ui,
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			Oxygen,
			Ubuntu,
			Cantarell,
			'Open Sans',
			'Helvetica Neue',
			sans-serif;
			font-weight: bold;
			font-size: 32rpx;
			color: #323233;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
		}

		.contentList {

			width: 100%;
			display: flex;
			flex-direction: column;
			position: relative;

			.item {
				padding: 24rpx 0;
				display: flex;
				flex-direction: row;
				// width: 690rpx;
				// height: 152rpx;
				width: 100%;
				// height: 152rpx;
				border-bottom: 2rpx solid #EBEDF0;

				image {
					width: 254rpx;
					height: 128rpx;
				}

				.second {
					// margin: 0 0 0 16rpx;
					display: flex;
					flex-direction: column;

					.title {
						// width: 418rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #323233;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.button {
						// margin: 32rpx 0 0 262rpx;
						// width: 148rpx;
						// height: 48rpx;
						border-radius: 28rpx;
						border: 2rpx solid #2265EE;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #2265EE;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}

				}
			}

		}
	}
</style>